<template>
  <div>
    <!-- 搜索框-添加 -->
    <el-input
      placeholder="输入要搜索的用户名"
      v-model="input"
      clearable
      style="width: 300px"
    >
    </el-input>
    <el-button type="primary" @click="seach({ query: input })">查询</el-button>
    <el-button type="primary" @click="openAdd">添加</el-button>

    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%; text-align: center; margin-top: 10px"
      border
      lazy
    >
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="password" label="密码"> </el-table-column>
      <el-table-column prop="dentity.identity" label="身份权限">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="openup(scope.row)">编辑</el-button>
          <el-button size="mini" @click="back(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="currentChangeHandle"
      @size-change="sizeChangeHandle"
      layout="prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      style="text-align: right"
    >
    </el-pagination>
    <!-- 新增对话框 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="用户名" :label-width="formLabelWidth1">
          <el-input v-model="form1.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth1">
          <el-input v-model="form1.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份权限" :label-width="formLabelWidth1">
          <el-select v-model="form1.dentity_id" placeholder="请选择">
            <el-option
              v-for="item in cities"
              :key="item.dentity_num"
              :label="item.identity"
              :value="item.dentity_num"
            >
              <span style="float: left">{{ item.identity }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="up">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      username: "非法用户",
      input: "",
      dialogFormVisible: false,
      form: {},
      formLabelWidth: "80px",
      dialogFormVisible1: false,
      form1: {},
      formLabelWidth1: "80px",
      total: 0,
      currentPage: 1,
      pageSize: 10,
	  cities:[]
    };
  },
  created() {
    this.seach({});
  },
  methods: {
    // 用户视图
    seach(params) {
      this.$axios.post("/api/user/selof", params).then(
        // 返回值
        (res) => {
          this.tableData = res.data.data;
          this.total = res.data.data.length;
        }
      );
	   this.$axios.post("/api/user/seldentity", {}).then(res=>{
		   this.cities=res.data.data;
	   });
    },
    // 打开新增表单
    openAdd() {
      this.dialogFormVisible = true;
      this.form = {};
    },
    // 新增
    add() {
      this.$axios.post("/api/user/registered", this.form).then(
        // 返回值
        (res) => {
			if(res.data.code===1){
				this.open1();
			}
			if(res.data.code===3){
				this.open3();
			}
          this.dialogFormVisible = false;
          this.seach({});
        }
      );
    },
    // 打开编辑对话框
    openup(row) {
      this.form1 = row;
      this.dialogFormVisible1 = true;
    },
    up(row) {
      this.$axios.post("/api/user/change", this.form1).then(
        // 返回值
        (res) => {
          this.dialogFormVisible1 = false;
          this.seach({});
        }
      );
    },
    // 分页
    currentChangeHandle(e) {
      this.currentPage = e;
    },
    sizeChangeHandle(e) {
      this.pageSize = e;
    },
    back(row) {
      this.$axios.post("/api/user/del", { query: row.username }).then(
        // 返回值
        (res) => {
          this.seach({});
        }
      );
    },
	   open1() {
      this.$notify({
        title: "成功",
        message: "操作成功!",
        type: "success",
      });
    },

    open2() {
      this.$notify({
        title: "警告",
        message: "没有相似用户信息!",
        type: "warning",
      });
    },

    open3() {
      this.$notify.error({
        title: "错误",
        message: "该账号已存在!",
      });
    },
  },
};
</script>

<style>
</style>